<template>
  <div class="home">
    <HomeNav></HomeNav>
    <div class="wk">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        热卖商品
      </van-divider>
    </div>

    <!-- 功能栏 -->
    <van-cell class="vc">
      <van-swipe class="my-swipe"  indicator-color="white">
        <van-swipe-item>
          <van-grid :column-num="5" :gutter="10" square>
            <van-grid-item v-for="value in 10" :key="value" icon="gift-o" text="文字" />
          </van-grid>
        </van-swipe-item>
        <van-swipe-item>
          <van-grid :column-num="5" square>
            <van-grid-item v-for="value in 10" :key="value" icon="gift-o" text="文字" />
          </van-grid>
        </van-swipe-item>
      </van-swipe>
    </van-cell>
    <!-- 秒杀模块 -->
    <van-cell class="vc">
      <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
    </van-cell>

    <div>
      <van-notice-bar left-icon="volume-o" :scrollable="false">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item>精通Java</van-swipe-item>
          <van-swipe-item>精通数据库</van-swipe-item>
          <van-swipe-item>做过多个大型项目</van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </div>
    <!-- 展示最新商品数据 -->
    <div>
      <van-row type="flex">
        <van-col span="12" v-for="(p,key) in plist">
          <van-card class="home-vc"
            :key="p.id"
            :num="p.stock"
            :price="p.price"
            :desc="p.detail"
            :title="p.subtitle"
            :thumb="p.mainImage"
            @click="toDetail(p.id)"
          />
        </van-col>
      </van-row>
    </div>

  </div>
</template>

<script>
import HomeNav from '@/components/HomeNav.vue';

export default {
  name: 'Home',
  components:{
    HomeNav,
  },
   data() {
      return {
        time: 30 * 60 * 60 * 1000,
        images: [
          'https://up.enterdesk.com/edpic_source/cf/31/ed/cf31edf65aa254cf0024ae95b363a382.jpg',
        ],
        plist:[]
      };
    },
    created() {
      this.axios.get('/rlg/product/new')
        .then((response) => {
          // 把用户信息保存起来
          if(response.data.code == 200){
            // 把获取到的数据赋值给plist
            this.plist=response.data.data
          }else{
            //失败弹出弹框
          }
        })
    },
    methods:{
      toDetail(id){
        // 1.传参获取当前点击商品id
        // 2.将商品id通过路由传递到商品详情页面
        this.$router.push({
          name:"ProductDetail",
          params:{pid:id}
        });
      }
    }
};
</script>

<style>
  .home-vc{
    padding: 5px !important;
    margin: 5px;
    border-radius: 5px;
  }
    .colon {
      display: inline-block;
      margin: 0 4px;
      color: #ee0a24;
    }
    .block {
      display: inline-block;
      width: 22px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      background-color: #ee0a24;
    }
  .vc{
    width: 90% !important;
    margin: auto;
    border-radius: 10px;
    margin-top: 20px;
  }
   .notice-swipe {
      height: 40px;
      line-height: 40px;
    }
  .wk img{
    height: 200px;
  }
   .my-swipe .van-swipe-item {
      font-size: 20px;
      line-height: 150px;
      text-align: center;
    }
</style>
